@import './modules/reset';



/*banner 轮播图部分图片及导航*/
.banner{
	width: 100%;
	height: 460px;
	margin-bottom: 14px;
	&-img{
		@extend .banner;
		width: 1226px;
		margin: 0 auto;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
		.swiper-button-prev{
			left: 244px;
			color: #cccccc;
		}
		.swiper-button-next{
			color: #cccccc;
		}
		&-nav{
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			width: 234px;
			height: 460px;
			background-color: rgba(0,0,0,0.6);
			ul{
				width: 234px;
				height: 455px;
				padding-top: 5px;
				li{
					height: 38px;
					line-height: 38px;
					font-size: 14px;
					a{
						color: #ebebeb;
						padding-left:30px;
						padding-right: 15px;
						display: inline-block;
						width: 189px;
						i{
						   float: right;
						   font-size: 18px;	
						}
					}
				}
			}
		}
	}
}

.banner-img-nav ul li:hover{
	background-color:#ff6700 
}
/*页面主体内容*/
main{
	.main-nav{
		width: 1226px;
		height: 170px;
		margin: 0 auto;
		margin-bottom: 26px;
		&-information{
			width: 234px;
			height: 170px;
			float: left;
			ul{
				@extend .main-nav-information;
				background-color: #5f5750;
				box-sizing: border-box;
				padding: 3px;
				display: flex;
				justify-content: space-around;
				flex-wrap:wrap ;
				align-content: space-around;
				position: relative;
				li{
					width:112px ;
					height: 82px;
					display: flex;
					justify-content: space-around;
					align-items: center;
					a{
						font-size: 12px;
						color: #cdcac8;
					}
				}
				span{
					position: absolute;
					background-color: #665e57;
				}
				.span-1{
					top: 9px;
					left: 4px;
					width: 1px;
					height: 70px;
				}
				.span-2{
					@extend.span-1;
					left: 117px;
				}
				.span-3{
					width: 102px;
					height: 1px;
					top: 84px;
					left:8px ;
				}
				.span-4{
					@extend .span-3;
					left:124px;
				}
				.span-5{
					@extend.span-1;
					top: 90px;
				}
				.span-6{
					@extend.span-2;
					top: 90px;
				}
			}
		}
		&-img{
			width: 978px;
			height: 170px;
			float: right;
			ul{
				@extend .main-nav-img;
				>li{
					float: left;
					margin-left: 10px;
				}
			}
		}
	}
/*热销单品样式*/
.main-goods{
		width: 1226px;
		height: 438px;
		margin: 0 auto;
		&-text{
			height: 58px;
			h2{
				float: left;
				font-size: 22px;
				line-height: 58px;
			}
			.main-goods-btn{
				float: right;
				width: 70px;
				height: 25px;
				margin-top: 22px;
				border:1px solid #e0e0e0;
				>a{
					float: left;
					line-height: 25px;
					width: 34px;
					cursor: pointer;
					img{
						margin-left: 11px;
					}
				}
				&-1{
					border-right:1px solid #e0e0e0 ;
				}
			}
		}
		&-hot{
			height: 380px;
			width: 1226px;
			box-sizing: border-box;
			padding-bottom: 40px;
			position: relative;

			.slider{
				height: 340px;
				width: 1226px;
				overflow: hidden;
				>li{
					width:234px ;
					height: 340px;
					float: left;
					box-sizing: border-box;
					background-color: #fafafa;
					margin-right: 11px;
					padding: 39px 21px 0px;
					border-top: 1px solid #333333;
					>a {
						display: block;
						width:160px ;
						margin: 0 16px 22px;
						img{
							width:160px ;
							height: 160px;
					  	}
					}  
					>h3 {
						font-size: 14px;
						margin-bottom:8px ;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						a{
							color: #212121;
						}
					}
					.main-goods-hot-desc{
						font-size: 12px;
						margin: 0 20px 20px;
						text-align: center;
						color: #b0b0b0;
					}
					.main-goods-hot-price{
						text-align: center;
						font-size: 14px;
						color: #c6151d;
					}
				}	
			}
		}
	}
}
/*基础系列、多功能腕表、女士、情侣系列、经典陀飞轮样式*/
.main-page{
	width: 100%;
	padding-top: 60px;
	box-sizing: border-box;
	background-color: #f5f5f5;
	.main-contain{
		width: 1226px;
		height: 694px;
		margin: 0 auto;
		&-text{
			height: 58px;
			h2{
				float: left;
				font-size: 22px;
				line-height: 58px;
			}
			.main-contain-btn{
				float: right;
				margin-top:20px ;
				a {
					color:#424242;
					font-size: 16px;
				}
				a:hover{
					color: #ff6700;
				}
			}
			.main-contain-btn:hover{
				color: #ff6700;
			}
		}
		&-goods{
			height: 628px;
			.main-contain-left{
				@extend .main-contain-goods;
				float: left;
				width: 234px;
				ul{
					height: 614px;
					img{
						@extend ul ;
					}
				}
			}
			.main-contain-right{
				float: right;
				width: 978px;
				height: 628px;
				ul{
					position: relative;
					height: 614px;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-content: space-between;
					li{
						width: 234px;
						height: 300px;
						padding: 20px 0;
						box-sizing: border-box;
						background-color: #fff;
						.a{
							display: block;
							height: 160px;
							margin: 0 40px;
							img{
								width: 160px;
								height: 160px;
							}
						}

					}
				}
			}
			li:hover{
				box-shadow: 0 15px 30px rgba(0,0,0,0.1);
			}
		}
	}
}
.p-title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	
	font-size:14px ;
	margin: 0 7px;
	text-align: center;
	margin-top: 10px;
	a{
		color: #212121;
	}
}
.p-desc{
	@extend .p-title;
	color: #b0b0b0;
	margin-top: 8px;
}

.p{
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	color: #c6151d;
}

